<template>
  <q-layout
    view="lHh Lpr lFf"
    style="background: linear-gradient(135deg, #5b6a82 10%, #162b4d 100%)"
  >
    <q-header class="bg-transparent text-white">
      <q-toolbar class="q-pa-md">
        <q-toolbar-title> 价格页面 </q-toolbar-title>
        <q-space />

        <div class="q-gutter-sm row items-center no-wrap">
          <q-btn
            square
            dense
            flat
            color="text-grey-7"
            label="控制台"
            icon="dashboard"
          >
            <q-tooltip>Dashboard</q-tooltip>
          </q-btn>
          <q-btn square dense flat color="text-grey-7" label="定价" icon="lock">
            <q-tooltip>Pricing</q-tooltip>
          </q-btn>
          <q-btn square dense flat color="text-grey-7" label="锁定" icon="lock">
            <q-tooltip>锁定页面</q-tooltip>
          </q-btn>
        </div>
      </q-toolbar>
    </q-header>

    <q-page-container>
      <section
        style="min-height: 25vh"
        class="flex text-white flex-center layout_bg"
      >
        <div style="position: relative">
          <div class="text-h4 text-center">为您选择最佳方案</div>
          <div class="text-subtitle2 q-pt-sm text-center">每种方案，dddd</div>
        </div>
      </section>
      <section class="q-pb-lg">
        <div class="row q-col-gutter-sm q-px-sm">
          <div
            class="col-lg-3 col-md-3 col-xs-12 col-sm-12"
            v-for="pricing_item in pricing_data"
            :key="pricing_item.title"
          >
            <card-pricing
              :title="pricing_item.title"
              :icon="pricing_item.icon"
              :price="pricing_item.price"
              :background_image="pricing_item.background_image"
              :text="pricing_item.text"
            ></card-pricing>
          </div>
        </div>
      </section>
    </q-page-container>

    <section class="flex row flex-center q-py-sm">
      <div class="text-weight-bold text-subtitle2 text-white">
        Copyright © {{ year }}, made with
        <q-icon name="fas fa-heart"></q-icon>
        by Pratik Patel
      </div>
    </section>
  </q-layout>
</template>

<script setup lang="ts">
import { defineAsyncComponent } from 'vue';

const pricing_data = [
  {
    title: '基础',
    price: '198',
    icon: 'home_work',
    background_image: 'linear-gradient(to right, #ed6ea0 0%, #ec8c69 100%)',
    text: '后来想想那份深情，倒像是胡闹。',
  },
  {
    title: '果冻',
    price: '298',
    icon: 'home',
    background_image: 'linear-gradient(-225deg, #5D9FFF 0%, #6BBBFF 100%)',
    text: '后来想想那份深情，倒像是胡闹。',
  },
  {
    title: '跳跳糖',
    price: '398',
    icon: 'apartment',
    background_image: 'linear-gradient(to right, #2B86C5 0%, #2B86C5 100%)',
    text: '后来想想那份深情，倒像是胡闹。',
  },
  {
    title: '夜晚',
    price: '498',
    icon: 'business_center',
    background_image:
      'linear-gradient(87deg, rgb(17, 205, 239), rgb(17, 113, 239)) !important',
    text: '后来想想那份深情，倒像是胡闹。',
  },
];

const CardPricing = defineAsyncComponent(
  () => import('components/cards/CardPricing.vue')
);

const year = new Date().getFullYear();
</script>

<style scoped></style>
